<template>
  <div class="page-content" v-loading="loading">
    <el-row :gutter="20">
      <el-col class="el-col2">
        <el-radio
          v-model="roleform.user_type"
          label="客户"
          border
          @change="RolesData"
          >客户</el-radio
        >
        <el-radio
          v-model="roleform.user_type"
          label="内部"
          border
          @change="RolesData"
          >内部</el-radio
        >
        <el-button
          type="danger"
          icon="el-icon-plus"
          @click="roleDialog('add', '')"
          >新增角色</el-button
        >
      </el-col>
    </el-row>

    <k-table style="margin-top: 15px" :data="roleList" :showPage="false">
      <el-table-column fixed="left" label="操作" width="150px">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="roleDialog('edit', scope.row.id)"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            style="color: #FA6962"
            icon="el-icon-delete"
            @click="delRoles(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="角色类型" prop="user_type" />
      <el-table-column label="角色名称" prop="role" />
      <el-table-column label="拥有权限" prop="power_name">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.power_name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
    </k-table>

    <el-dialog :title="roleTitle" width="500px" :visible.sync="isAddorEdit">
      <el-form ref="roleform" :model="roleform" label-width="80px">
        <el-form-item label="分公司">
          <el-input v-model="roleform.gscode"></el-input>
        </el-form-item>
        <el-form-item label="角色名称">
          <el-input v-model="roleform.role"></el-input>
        </el-form-item>
        <el-form-item label="角色类型">
          <el-radio v-model="roleform.user_type" label="客户">客户</el-radio>
          <el-radio v-model="roleform.user_type" label="内部">内部</el-radio>
        </el-form-item>
        <el-form-item label="角色权限">
          <el-checkbox
            :indeterminate="isIndeterminate"
            v-model="checkAll"
            @change="handleCheckAllChange"
            >全选</el-checkbox
          >
          <div style="margin: 15px 0;"></div>
          <el-checkbox-group
            v-model="checkedRoles"
            @change="handleCheckedChange"
          >
            <el-checkbox
              v-for="(item, index) in roleData"
              :label="item.power_name"
              :key="index"
              >{{ item.power_name }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="isAddorEdit = false">取 消</el-button>
        <el-button
          type="primary"
          @click="EditRoles"
          v-if="btntext == '保 存'"
          >{{ btntext }}</el-button
        >
        <el-button type="danger" @click="AddRoles" v-else>{{
          btntext
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { RolesApi } from "@/api/userApi";
import { PowersApi } from "@/api/userApi";
import { ChangeRoleApi } from "@/api/userApi";
import { getRoleidApi } from "@/api/userApi";
import { AddRoleApi } from "@/api/userApi";
import { RemoveRoleApi } from "@/api/userApi";
const totalOptions = [
  "在线下单",
  "订单中心",
  "对账单",
  "查看他人订单",
  "发货通知",
  "个人中心"
];
export default {
  inject: ["reload"],
  data() {
    return {
      loading: true,
      isAddorEdit: false,
      roleTitle: "",
      btntext: "",
      roleform: {
        id: "",
        gscode: "",
        user_type: "客户",
        role: "",
        power_name: "",
        power: ""
      },
      props: {
        label: "name"
      },
      count: 1,
      roleList: [],
      checkAll: false,
      checkedRoles: [],
      roleData: [],
      isIndeterminate: true,
      values: [], // 存储value的数组
      labels: [] // 存储label的数组
    };
  },
  mounted() {
    this.RolesData();
  },
  methods: {
    RolesData() {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      let username = userdata.userName;
      let userid = userdata.id;
      let logintype = userdata.logintype;
      let posttype = userdata.posttype;
      RolesApi({
        guestcode: guestcode,
        gscode: gscode,
        usertype: this.roleform.user_type,
        username: username,
        userid: userid,
        menuename: "Roles",
        menucname: "角色设置",
        logintype: logintype,
        posttype: posttype,
        op_type: "查询"
      }).then(res => {
        this.loading = false;
        this.roleList = [];
        this.roleList = res.data;
      });
    },
    RolesDataDetail(val) {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      RolesApi({
        guestcode: guestcode,
        gscode: gscode,
        id: val
      }).then(res => {
        this.roleform = [];
        this.roleform = res.data[0];
        this.PowersData(res.data[0].power_name);
      });
    },
    PowersData(val) {
      PowersApi({}).then(res => {
        this.roleData = res.powers[1].powers;
        this.checkedRoles = [];
        val.split(",").forEach(element => {
          this.checkedRoles.push(element);
        });
      });
    },
    roleDialog(type, val) {
      this.isAddorEdit = true;
      this.roleTitle = type === "add" ? "新增角色" : "编辑角色";
      if (type == "add") {
        let userdata = JSON.stringify(this.$store.state.user.user.info);
        userdata = JSON.parse(userdata);
        let gscode = userdata.gscode;
        this.btntext = "添 加";
        this.roleform.gscode = gscode;
        this.roleform.role = "";
        this.roleform.power_name = "";
        this.checkedRoles = [];
        this.PowersData("");
      } else {
        this.btntext = "保 存";
        this.RolesDataDetail(val);
      }
    },
    handleCheckAllChange(val) {
      this.checkedRoles = val ? totalOptions : [];
      let powername = "";
      this.checkedRoles.forEach(element => {
        powername += element + ",";
      });
      getRoleidApi({
        upowers: powername
      }).then(res => {
        if (res.code == "0") {
          this.roleform.power = res.data;
        }
      });
      this.isIndeterminate = false;
    },
    handleCheckedChange(val) {
      let powername = "";
      val.forEach(element => {
        powername += element + ",";
      });
      getRoleidApi({
        upowers: powername
      }).then(res => {
        this.roleform.power = res.data;
      });
      let checkedCount = val.length;
      this.checkAll = checkedCount === this.roleData.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.roleData.length;
    },
    AddRoles() {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      let username = userdata.userName;
      let userid = userdata.id;
      let logintype = userdata.logintype;
      let posttype = userdata.posttype;
      AddRoleApi({
        guestcode: guestcode,
        gscode: gscode,
        usertype: this.roleform.user_type,
        username: this.roleform.role,
        upowers: this.roleform.power,
        menuename: "Roles",
        menucname: "角色设置",
        userid: userid,
        logintype: logintype,
        posttype: posttype,
        op_type: "新增",
        note: this.roleform.role
      }).then(res => {
        if (res.code == "0") {
          this.$message.success("添加成功");
          this.isAddorEdit = false;
          this.loading = true;
          this.RolesData();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    delRoles(val) {
      this.$confirm("您确定要删除当前角色吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error"
      })
        .then(() => {
          let userdata = JSON.stringify(this.$store.state.user.user.info);
          userdata = JSON.parse(userdata);
          let guestcode = userdata.reguserno;
          let gscode = userdata.gscode;
          let username = userdata.userName;
          let userid = userdata.id;
          let logintype = userdata.logintype;
          let posttype = userdata.posttype;
          RemoveRoleApi({
            guestcode: guestcode,
            gscode: gscode,
            id: val,
            menuename: "Roles",
            menucname: "角色设置",
            username: username,
            userid: userid,
            logintype: logintype,
            posttype: posttype,
            op_type: "删除",
            note: val
          }).then(res => {
            if (res.code == "0") {
              this.$message.success("删除成功");
              this.loading = true;
              this.RolesData();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch(() => {});
    },
    EditRoles() {
      let userdata = JSON.stringify(this.$store.state.user.user.info);
      userdata = JSON.parse(userdata);
      let guestcode = userdata.reguserno;
      let gscode = userdata.gscode;
      let username = userdata.userName;
      let userid = userdata.id;
      let logintype = userdata.logintype;
      let posttype = userdata.posttype;
      ChangeRoleApi({
        guestcode: guestcode,
        gscode: gscode,
        id: this.roleform.id,
        ywtype: "all",
        username: this.roleform.role,
        upowers: this.roleform.power,
        menuename: "Roles",
        menucname: "角色设置",
        userid: userid,
        logintype: logintype,
        posttype: posttype,
        op_type: "更新",
        note: this.roleform.role
      }).then(res => {
        if (res.code == "0") {
          this.$message.success("修改成功");
          this.isAddorEdit = false;
          this.loading = true;
          this.RolesData();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    handleCheckChange(data, checked, indeterminate) {
      // console.log(data, checked, indeterminate);
    },
    handleNodeClick(data) {
      // console.log(data);
    }
  }
};
</script>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;
  ::v-deep .el-radio {
    margin-right: 0px;
    margin-right: 10px;
  }
}
</style>
